<template>
  <h2>{{ user.job.salary }}</h2>
  <button @click="user.job.salary++">加薪</button>
</template>

<script lang="ts">
import { defineComponent, reactive, watch } from "vue";

export default defineComponent({
  name: "HelloWorld",
  setup() {
    let user = reactive({ name: "tom", job: { salary: 20 } });
    watch(
      () => user.job,
      function (oldValue, newValue) {
        console.log("变了", oldValue, newValue);
      },
      { immediate: true, deep: true }
    );
    return { user };
  },
});
</script>

<style scoped></style>
